<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-21 17:49:44
 * @LastEditDate: Do not exit
-->
<template>
  <div>
    <br/>
    <el-button size="small" @click="addCate">添加</el-button>
    <el-tree
        :data="categoryData"
        show-checkbox
        node-key="id"
        :props="props"
        default-expand-all
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
            <el-button type="text" size="mini" @click="append(data)">编辑</el-button>
            <el-button type="text" size="mini" @click="remove(data)">删除</el-button>
            </span>
        </span>
    </el-tree>



    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="品类类型" label-width="120px">
          <el-select v-model="form.parentId" placeholder="品类类型">
            <el-option label="护肤品" value="1"></el-option>
            <el-option label="彩妆" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品类名称" label-width="120px">
          <el-input v-model="form.categoryName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">提 交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getCategory,removeById,insert,update} from "@/api/category.js"

export default {
    data(){
        return{
            categoryData:[],
            props: {
              label: "categoryName",
              children: "children",
            },
            title:"添加品类",
            dialogFormVisible:false,
            form:{},
            pid:"",
        }
    },
    created(){
      this.loadData();
    },
    methods:{
        append(data) {
            // console.log(data);
            this.form.id=data.id;
            // this.form=data;
            this.title="修改品类";
            this.dialogFormVisible=true;
        },
        remove(data) {
            this.$confirm('是否要删除该项?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              removeById(data.id).then(res=>{
              if(res.data.code==="0000"){
                this.$message.success(res.data.msg);
                this.loadData();
              }
            })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        loadData(){
          getCategory().then(res=>{
            if(res.data.code==="0000"){
              this.categoryData=res.data.data;
            }
          })
        },
        addCate(){
          this.title="添加品类";
          this.form={};
          this.dialogFormVisible=true;
        },
        add(){
          if(this.title==="添加品类"){
            this.form.status=1;
            insert(this.form).then(res=>{
              if(res.data.code==="0000"){
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });  
                this.dialogFormVisible=false;
                this.loadData(); 
              }
            })
          }
          else if(this.title==="修改品类"){
            update(this.form).then(res=>{
              if(res.data.code==="0000"){
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });  
                this.dialogFormVisible=false;
                this.loadData(); 
              }
            })
          }
        }

    },
}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>